<template>
  <u-popup :show="isShow" mode="bottom" @close="handleClose" :round="10" :closeable="true">
    <view class="flex-column overflow-y-scroll">
      <view class="top flex p-10" style="height: 200rpx">
        <image :src="spu.coverImg" class="img-base m-l-10"></image>
        <view class="spu-info m-l-30">
          <view class="font-bold">{{ spu.name }}</view>
          <view class="m-t-10 font-bold text-color-red">
            <view v-if="chooseSkuData">￥{{ chooseSkuData.sellPrice / 100 }}</view>
            <view v-else>
              <view v-if="(spu.minPrice = spu.maxPrice)">￥{{ spu.minPrice / 100 }}</view>
              <view v-else>￥{{ spu.minPrice / 100 }} - {{ spu.maxPrice / 100 }}</view>
            </view>
          </view>
          <view class="m-t-10">
            库存：{{ chooseSkuData ? chooseSkuData.usableStock : spu.usableStock }}
          </view>
        </view>
      </view>
      <scroll-view class="detail" scroll-y="true">
        <view class="attr flex-column p-20" v-if="spu.attrList">
          <view class="flex-column" v-for="(item, index) in spu.attrList" :key="index">
            <view class="title flex-start-center m-b-20">
              <text class="m-r-20">{{ item.attrKeyName }}</text>
              <!-- <view class="desc" v-if="item.attrKeyName">({{ item.attrKeyName }})</view> -->
            </view>
            <view class="flex-wrap w-full">
              <view
                class="font-size-sm text-color-grey bg-color-lightgrey m-b-10 m-r-10 p-x-30 p-y-10"
                :class="{ choose: value.isChoose }"
                style="border-radius: 10rpx"
                v-for="(value, key) in item.attrValueList"
                :key="key"
                @tap="chooseSku(index, key)">
                {{ value.attrValueName }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="flex-between-center bg-color-lightgrey p-x-20" style="height: 100rpx">
        <view class="left flex-column-center-start flex-1">
          <!-- <view class="" v-if="chooseSkuData">
                        ￥{{ chooseSkuData.sellPrice / 100 }}
                    </view> -->
          <view class="text-color-grey font-size-sm text-overflow-1">
            {{ calSkuSpecDesc() }}
          </view>
        </view>
        <view class="right">
          <u-number-box
            v-model="spu.num"
            :min="1"
            :max="100"
            :step="1"
            integer
            :disabledInput="true" />
        </view>
      </view>
      <up-button @click="addCart" type="primary" text="加入购物车" />
    </view>
  </u-popup>
</template>

<script setup>
const { proxy } = getCurrentInstance();
let isShow = ref(false); // 商品选规格时的详情框是否显示
let spu = ref({}); // 商品数据
let chooseSkuData = ref(null); // 选择的sku
let skuMap = ref(null); // "X,蓝色" => sku

// 暴露方法
defineExpose({
  show,
});

async function show(spuData) {
  spu.value = spuData;
  isShow.value = true;
  chooseSkuData.value = null;

  function getGroupArrayObj(list, attr) {
    const map = new Map();
    list.forEach((item, index, arr) => {
      if (!map.has(item[attr])) {
        map.set(
          item[attr],
          arr.filter((a) => a[attr] == item[attr])
        );
      }
    });
    const unique = (arrs) => {
      const res = new Map();
      return arrs.filter((arr) => !res.has(arr.attrValueName) && res.set(arr.attrValueName, 1));
    };
    return Array.from(map).map((item) => {
      let attrValueList = unique(item[1]);
      return {
        attrKeyId: attrValueList[0].attrKeyId,
        attrKeyName: item[0],
        attrValueList: attrValueList,
      };
    });
  }
  // 计算sku中包含的属性值
  let specList = [];
  spu.value.skuList.forEach((skuItem) => {
    skuItem.specList.forEach((specItem) => {
      specList.push(specItem);
    });
  });
  spu.value.attrList = getGroupArrayObj(specList, 'attrKeyName');
  initSkuMap();
}
// 规格信息对应sku  "X,蓝色" => sku
function initSkuMap() {
  const map = new Map();
  spu.value.skuList.forEach((skuItem) => {
    map.set(skuItem.specList.map((obj) => obj.attrValueName).join(','), skuItem);
  });
  skuMap.value = map;
}
function calSkuSpecDesc() {
  let attrDescList = [];
  if (spu.value.attrList) {
    spu.value.attrList.forEach((attr) => {
      attr.attrValueList.forEach((value) => {
        if (value.isChoose) {
          attrDescList.push(value.attrValueName);
        }
      });
    });
  }
  return attrDescList.join(',');
}
// 选sku
function chooseSku(index, key) {
  if (spu.value.attrList[index].attrValueList[key].isChoose === 1) {
    spu.value.attrList[index].attrValueList[key].isChoose = 0;
    chooseSkuData.value = null;
    return;
  }
  spu.value.attrList[index].attrValueList.forEach((value) => proxy.$set(value, 'isChoose', 0));
  spu.value.attrList[index].attrValueList[key].isChoose = 1;
  let attrDesc = calSkuSpecDesc();
  // 确认所需 sku-id
  chooseSkuData.value = skuMap.value.get(attrDesc);
}
// 加入购物车
function addCart() {
  if (chooseSkuData.value == null) {
    proxy.submitFail('请选择sku！');
    return;
  }
  // 请求后端开始加入购物车数据
  proxy.$api.cart.add({
    spuId: spu.value.id,
    skuId: chooseSkuData.value.id,
    num: spu.value.num,
  });
  handleClose();
}
function handleClose() {
  proxy.$emit('close', false);
  isShow.value = false;
}
</script>

<style lang="scss" scoped>
.detail {
  min-height: 1vh;
  max-height: calc(90vh - 500rpx);

  .attr {
    border-top: 2rpx solid #f5f5f5;

    .choose {
      background-color: $color-primary;
      color: white;
    }
  }
}
</style>
